<template>
    <div class="am-g upload_wrap">
        <div class="am-u-sm-12">
            <form class="am-form am-scrollable-horizontal">
                <table class="am-table am-table-bordered am-table-striped am-text-nowrap am-table-centered">
                <thead>
                <tr>
                    <th class="table-title">广告名称</th>
                    <th class="table-count">每天计费次数</th>
                    <th class="table-total">观看总次数</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in resultDate" :key="index">
                    <td>{{item.adName}}</td>
                    <td class="am-g">
                        <div class="am-u-sm-12">
                            <select v-model="countSelected" @change="getCountSelected" :disabled="!editable">
                                <option :value="item.value" v-for="(item,index) in countList" :key="'count'+index">{{item.value}}</option>
                            </select>
                        </div>
                    </td>
                    <td class="am-g">
                        <div class="am-u-sm-12">
                            <select v-model="totalSelected" @change="getTotalSelected" :disabled="!editable">
                                <option :value="item.value" v-for="(item,index) in totalList" :key="'total'+index">{{item.value}}</option>
                            </select>
                        </div>
                    </td>
                </tr>
                </tbody>
                </table>

                <hr />
                <p>说明：本基础数据是对于同一个用户账号来定义的。广告主所选的参数都是对同一个账号起作用。</p>
                <br/>
            </form>
            <div class="am-margin textCenter">
                <div @click="handleCancel()" class="am-btn am-btn-warning am-btn-primary borderRadius4">取消</div>
                <div @click="handleSubmit()" class="am-btn am-btn-warning am-btn-primary borderRadius4">提交</div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import {url} from '../../../static/config'
export default {
  data () {
    return {
      countList: [
        {value: '默认(3次)'},
        {value: '1'},
        {value: '2'},
        {value: '3'},
        {value: '4'},
        {value: '5'},
        {value: '6'},
        {value: '7'},
        {value: '8'},
        {value: '9'},
        {value: '10'},
        {value: '不限'}
      ],
      totalList: [
        {value: '默认(30次)'},
        {value: '1'},
        {value: '2'},
        {value: '3'},
        {value: '4'},
        {value: '5'},
        {value: '6'},
        {value: '7'},
        {value: '8'},
        {value: '9'},
        {value: '10'},
        {value: '15'},
        {value: '20'},
        {value: '25'},
        {value: '30'},
        {value: '40'},
        {value: '50'},
        {value: '60'},
        {value: '70'},
        {value: '80'},
        {value: '90'},
        {value: '100'},
        {value: '不限'}
      ],
      slideNav: this.$route.query.upload || 'adalready',
      resultDate: [],
      id: '',
      adId: '',
      countSelected: '', // 计费次数
      totalSelected: '', // 观看次数
      editable: this.$route.query.editable// 是否可编辑
    }
  },
  created () {
    var _this = this
    _this.id = _this.$route.query.id
    var adId = encodeURIComponent(_this.$route.query.adId)
    _this.adId = adId
    console.log('编辑选中', _this.$route.query.adId, adId)
    axios.post(url + '/web-adv/getAdLimitByAdId?adId=' + adId)
      .then(function (res) {
        // 已投放（查看/编辑）按钮，投放页面 选中按钮，查询投放限制接口
        var data = JSON.parse(res.data)
        _this.resultDate = data
        _this.countSelected = data.result.billingTimes || _this.countList[0].value
        _this.totalSelected = data.result.viewTimes || _this.totalList[0].value
        // console.log('返回', data.result.billingTimes, data.result.viewTimes)
      })
  },
  methods: {
    handleCancel () {
      this.$router.go(-1)
    },
    handleSubmit () {
      var _this = this
      var billingTimes = _this.countSelected === '默认(3次)' ? '3' : _this.countSelected
      var viewTimes = _this.totalSelected === '默认(30次)' ? '30' : _this.totalSelected
      // console.log('提交数据', billingTimes, viewTimes)
      var params = _this.slideNav === 'adalready'
        ? '/web-adv/setAdPlaceLimit?id=' + _this.id + '&adId=' + _this.adId + '&billingTimes=' + billingTimes + '&viewTimes=' + viewTimes
        : '/web-adv/setAdPlaceLimit?adId=' + _this.adId + '&billingTimes=' + billingTimes + '&viewTimes=' + viewTimes
      axios.post(url + params)
        .then(function (res) {
        // 修改提交、选中-提交 对应接口
          var data = JSON.parse(res.data)
          if (data.result) {
            _this.$router.go(-1)
          }
        })
    },
    getCountSelected () {
      console.log('第一个', this.countSelected)
    },
    getTotalSelected () {
      console.log('第二个', this.totalSelected)
    }
  }
}
</script>
